import React, { useEffect, useState, useCallback } from 'react';
import {
  Table,
  Button,
  Space,
  Card,
  Modal,
  Form,
  message,
  Select,
  Upload,
  TreeSelect,
  Tabs,
  Input,
  Row,
  Col,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { TablePaginationConfig } from 'antd/es/table';
import { OrganizationItem, TemplateItem } from 'admin/schema/Cas';
import {
  getTemplates,
  addTemplate,
  updateTemplate,
  deleteTemplate,
  auditTemplate,
  getCasOrganizationsShow,
  importTemplate,
  uploadUrl,
  deleteApprovedTemplate,
  getCasSignatureList,
} from 'admin/servers/modules/Cas';
import TemplateFormModal from '../components/TemplateFormModal';
import TemplateAuditModal from '../components/TemplateAuditModal';
import { useSelector } from 'react-redux';
import {
  debounce,
  filter,
  find,
  flatten,
  get,
  includes,
  isEmpty,
  map,
  reduce,
  some,
  startsWith,
} from 'lodash';
import { convertToTree, downLoadByUrl, getFileList } from '../utils';
import { UploadOutlined } from '@ant-design/icons';
import { UploadFile } from 'antd/es/upload/interface';
import qs from 'query-string';

const { TabPane } = Tabs;

interface TemplateFormValues {
  name: string;
  type: string[];
  content: string;
  organizationId: string;
  signatureId: string;
  cuFileUrl?: UploadFile[];
  ctFileUrl?: UploadFile[];
}

interface AuditFormValues {
  auditStatus: string;
  remark: string;
}

const Templates: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [templates, setTemplates] = useState<TemplateItem[]>([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm<TemplateFormValues>();
  const [auditForm] = Form.useForm<AuditFormValues>();
  const [editingTemplate, setEditingTemplate] = useState<TemplateItem | null>(null);
  const [organizations, setOrganizations] = useState<
    Omit<OrganizationItem, 'children' | 'description'>[]
  >([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const [selectedType, setSelectedType] = useState<string>(
    (qs.parse(location.search)?.activeTab as string) || '行业短信'
  );
  const [signatures, setSignatures] = useState<any[]>([]);
  const uniqueToken = useSelector((state: any) => state.uniqueToken);
  const userInfo = useSelector((state: any) => state.loginInfo);
  const [auditModalVisible, setAuditModalVisible] = useState(false);
  const [auditingTemplate, setAuditingTemplate] = useState<TemplateItem | null>(null);
  const [importModalVisible, setImportModalVisible] = useState(false);
  const [importForm] = Form.useForm();
  const [searchForm] = Form.useForm();

  // 获取模版列表
  const fetchTemplates = useCallback(
    async (page = 1, pageSize = 10, params = {}) => {
      setLoading(true);
      try {
        const response = await getTemplates({
          pageNo: page - 1,
          pageSize,
          type: selectedType || undefined,
          name: params.name || undefined,
          status: params.status,
        });
        if (response.status === 200) {
          const { content, totalElements, number } = response.data;
          setTemplates(content);
          setPagination(prev => ({
            ...prev,
            current: number + 1,
            pageSize,
            total: totalElements,
          }));
        }
      } catch (error) {
        console.error('获取模版列表出错:', error);
      } finally {
        setLoading(false);
      }
    },
    [selectedType]
  );

  // 获取单位树
  const fetchOrgTree = useCallback(async () => {
    try {
      const response = await getCasOrganizationsShow();
      if (response.status === 200) {
        setOrganizations(response.data);
      }
    } catch (error) {
      console.error('获取单位树出错:', error);
    }
  }, []);

  // 获取签名列表
  const fetchSignatures = useCallback(async () => {
    try {
      const response = await getCasSignatureList({
        pageNo: 0,
        pageSize: 5000,
      });
      if (response.status === 200) {
        setSignatures(filter(response.data.content, item => item.status === 'APPROVED'));
      }
    } catch (error) {
      console.error('获取签名列表出错:', error);
    }
  }, []);

  useEffect(() => {
    fetchTemplates();
    fetchOrgTree();
    fetchSignatures();
  }, [fetchTemplates, fetchOrgTree, fetchSignatures, selectedType]);

  const handleTableChange = useCallback(
    (newPagination: TablePaginationConfig) => {
      fetchTemplates(newPagination.current, newPagination.pageSize, searchForm.getFieldsValue());
    },
    [fetchTemplates, searchForm]
  );

  const handleAdd = useCallback(() => {
    setEditingTemplate(null);
    form.resetFields();
    setModalVisible(true);
  }, [form]);

  const handleEdit = useCallback(
    (record: TemplateItem) => {
      setEditingTemplate(record);
      form.setFieldsValue({
        name: record.name,
        type: [record.type],
        content: record.content,
        organizationId: record.organizationId,
        signatureId: record.signatureId,
        cuFileUrl: record.cuFileUrl ? getFileList(record.cuFileUrl) : [],
        ctFileUrl: record.ctFileUrl ? getFileList(record.ctFileUrl) : [],
      });
      setModalVisible(true);
    },
    [form]
  );

  const handleDelete = useCallback(
    (record: TemplateItem) => {
      Modal.confirm({
        title: '确认删除',
        content: `确定要删除模版"${record.name}"吗？`,
        onOk: async () => {
          try {
            const response = await deleteTemplate(record.id);
            if (response.status === 200) {
              message.success('删除成功');
              searchForm.resetFields();
              fetchTemplates();
            }
          } catch (error) {
            console.error('删除模版出错:', error);
          }
        },
      });
    },
    [fetchTemplates, searchForm]
  );

  const handleModalOk = useCallback(
    debounce(async () => {
      try {
        const values = await form.validateFields();
        const hasTargetSms = includes(values.type, '靶向短信');

        // 处理文件上传
        const fileFields = ['ctFileUrl', 'cuFileUrl'];
        const fileValues: any = reduce(
          fileFields,
          (acc, file) => {
            acc[file] = JSON.stringify(
              flatten(
                map(values[file], (item: any) => {
                  if (item.status === 'done' && item.response.status === 200) {
                    return item.response.data;
                  }
                  return [];
                }).filter((item: any) => !isEmpty(item))
              )
            );
            return acc;
          },
          {}
        );
        // 检查必需的文件是否已上传
        if (hasTargetSms && some(fileValues, (value: any) => value === '[]' || value === '""')) {
          message.error('请上传所有必需的文件');
          return;
        }

        if (editingTemplate) {
          // 更新模版
          const response = await updateTemplate(editingTemplate.id, {
            ...values,
            materials: '',
            type: values.type[0],
            ctFileUrl: fileValues.ctFileUrl,
            cuFileUrl: fileValues.cuFileUrl,
          });
          if (response.status === 200) {
            message.success('更新成功');
            setModalVisible(false);
            fetchTemplates(pagination.current, pagination.pageSize, searchForm.getFieldsValue());
          }
        } else {
          // 新增模版
          const response = await addTemplate({
            ...values,
            materials: '',
            type: values.type,
            ctFileUrl: fileValues.ctFileUrl,
            cuFileUrl: fileValues.cuFileUrl,
          });
          if (response.status === 200) {
            message.success('添加成功');
            setModalVisible(false);
            fetchTemplates(pagination.current, pagination.pageSize, searchForm.getFieldsValue());
          }
        }
      } catch (error) {
        console.error('表单提交出错:', error);
        message.error('表单提交失败，请填写必填项');
      }
    }, 500),
    [form, editingTemplate, fetchTemplates, pagination, searchForm]
  );

  const handleView = useCallback((record: TemplateItem) => {
    setAuditingTemplate(record);
    setAuditModalVisible(true);
  }, []);

  const handleAudit = useCallback(
    (record: TemplateItem) => {
      setAuditingTemplate(record);
      setAuditModalVisible(true);
      auditForm.resetFields();
    },
    [auditForm]
  );

  const handleAuditOk = useCallback(
    debounce(async () => {
      try {
        const values = await auditForm.validateFields();
        const response = await auditTemplate(auditingTemplate?.id || '', {
          ...values,
          auditBy: userInfo.id,
        });

        if (response.status === 200) {
          message.success('审核成功');
          setAuditModalVisible(false);
          fetchTemplates(pagination.current, pagination.pageSize, searchForm.getFieldsValue());
        }
      } catch (error) {
        console.error('审核出错:', error);
        message.error('审核失败');
      }
    }, 500),
    [auditForm, auditingTemplate, fetchTemplates, pagination, searchForm, userInfo.id]
  );

  const handleTypeChange = useCallback(
    (value: string) => {
      const url = new URL(location.href);
      url.searchParams.set('activeTab', value);
      history.pushState({}, '', url.toString());
      setSelectedType(value);
      setPagination(prev => ({ ...prev, current: 1 }));
      searchForm.resetFields();
    },
    [searchForm]
  );

  const handleImport = useCallback(() => {
    importForm.resetFields();
    setImportModalVisible(true);
  }, [importForm]);

  const handleImportOk = useCallback(
    debounce(async () => {
      try {
        const values = await importForm.validateFields();
        const fileList = values.file?.fileList;
        const hasTargetSms = values.type === '靶向短信';

        // 处理文件上传
        const fileFields = ['ctFileUrl', 'cuFileUrl'];
        const fileValues: any = reduce(
          fileFields,
          (acc, file) => {
            acc[file] = JSON.stringify(
              flatten(
                map(values[file], (item: any) => {
                  if (item.status === 'done' && item.response.status === 200) {
                    return item.response.data;
                  }
                  return [];
                }).filter((item: any) => !isEmpty(item))
              )
            );
            return acc;
          },
          {}
        );
        if (!fileList || fileList.length === 0) {
          message.error('请选择要导入的文件');
          return;
        }

        // 检查必需的文件是否已上传
        if (hasTargetSms && some(fileValues, (value: any) => value === '[]' || value === '""')) {
          message.error('请上传所有必需的文件');
          return;
        }

        const file = fileList[0].originFileObj;
        const response = await importTemplate({
          file,
          orgId: values.organizationId,
          materials: '',
          signatureId: values.signatureId,
          type: values.type,
          ctFileUrl: fileValues.ctFileUrl,
          cuFileUrl: fileValues.cuFileUrl,
        });

        if (response.status === 200) {
          message.success('导入成功');
          setImportModalVisible(false);
          searchForm.resetFields();
          fetchTemplates();
        }
      } catch (error) {
        console.error('导入模版出错:', error);
        message.error('导入失败，请检查表单');
      }
    }, 500),
    [importForm, searchForm, fetchTemplates]
  );

  const handleReset = debounce(() => {
    searchForm.resetFields();
    fetchTemplates();
  }, 500);

  const handleFinish = debounce((values: any) => {
    fetchTemplates(1, 10, values);
  }, 500);

  const columns: ColumnsType<TemplateItem> = [
    {
      title: '模版名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '单位',
      dataIndex: 'organizationId',
      key: 'organizationId',
      render: (_, record) => {
        const organization = find(organizations, item => item.id === record.organizationId);
        return organization?.name;
      },
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '创建人',
      dataIndex: 'applyName',
      key: 'applyName',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (_, record) => {
        if (record.status === 'PENDING') {
          return '待审核';
        } else if (record.status === 'UNDER_REVIEW') {
          return '审核中';
        } else if (record.status === 'APPROVED') {
          return '审核通过';
        } else if (record.status === 'REJECTED') {
          return '审核驳回';
        }
        return record.status;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render: time => new Date(time).toLocaleString(),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => {
        if (
          record.status === 'REJECTED' &&
          some(userInfo?.permissions, permission =>
            startsWith(permission?.code, 'BUSINESS_AUDIT_TEMPLATE_APPLICATION')
          )
        ) {
          return (
            <>
              <Button type="link" onClick={() => handleView(record)}>
                查看
              </Button>
              <Button type="link" onClick={() => handleEdit(record)}>
                编辑
              </Button>
              <Button type="link" danger onClick={() => handleDelete(record)}>
                删除
              </Button>
            </>
          );
        }
        if (record.status === 'PENDING') {
          if (
            some(userInfo?.permissions, permission =>
              startsWith(permission?.code, 'BUSINESS_AUDIT_TEMPLATE_AUDIT_LEVEL1')
            )
          ) {
            return (
              <Button type="link" onClick={() => handleAudit(record)}>
                审核
              </Button>
            );
          } else {
            return (
              <Button type="link" onClick={() => handleView(record)}>
                查看
              </Button>
            );
          }
        }
        if (record.status === 'UNDER_REVIEW') {
          if (
            some(userInfo?.permissions, permission =>
              startsWith(permission?.code, 'BUSINESS_AUDIT_TEMPLATE_AUDIT_LEVEL2')
            )
          ) {
            return (
              <Button type="link" onClick={() => handleAudit(record)}>
                审核
              </Button>
            );
          } else {
            return (
              <Button type="link" onClick={() => handleView(record)}>
                查看
              </Button>
            );
          }
        }
        return (
          <>
            <Button type="link" onClick={() => handleView(record)}>
              查看
            </Button>
            <Button
              type="link"
              danger
              onClick={() => {
                Modal.confirm({
                  title: '确认删除',
                  content: `确定要删除模版"${record.name}"吗？`,
                  onOk: async () => {
                    try {
                      const response = await deleteApprovedTemplate(record.id);
                      if (response.status === 200) {
                        message.success('删除成功');
                        searchForm.resetFields();
                        fetchTemplates();
                      }
                    } catch (error) {
                      console.error('删除模版出错:', error);
                    }
                  },
                });
              }}
            >
              删除
            </Button>
          </>
        );
      },
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Card
        title="模版管理"
        bordered={false}
        bodyStyle={{ paddingTop: 5 }}
        extra={
          some(userInfo?.permissions, permission =>
            startsWith(permission?.code, 'BUSINESS_AUDIT_TEMPLATE_APPLICATION')
          ) && (
            <Space>
              <Button onClick={handleImport}>
                <UploadOutlined /> 导入模版
              </Button>
              <Button type="primary" onClick={handleAdd}>
                新增模版
              </Button>
            </Space>
          )
        }
      >
        <Tabs activeKey={selectedType} onChange={handleTypeChange}>
          <TabPane tab="行业短信" key="行业短信">
            <Form
              layout="inline"
              form={searchForm}
              onFinish={handleFinish}
              style={{ marginBottom: '20px' }}
            >
              <Form.Item label="模版名称" name="name">
                <Input placeholder="请输入模版名称" />
              </Form.Item>
              <Form.Item label="状态" name="status">
                <Select placeholder="请选择状态" allowClear>
                  <Select.Option value="PENDING">待审核</Select.Option>
                  <Select.Option value="APPROVED">审核通过</Select.Option>
                  <Select.Option value="REJECTED">审核驳回</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  搜索
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={handleReset}>
                  重置
                </Button>
              </Form.Item>
            </Form>
            <Table
              columns={columns}
              dataSource={templates}
              rowKey="id"
              loading={loading}
              pagination={{
                ...pagination,
                showTotal: (total: number) => `共 ${total} 条`,
                showSizeChanger: true,
              }}
              onChange={handleTableChange}
            />
          </TabPane>
          <TabPane tab="靶向短信" key="靶向短信">
            <Form
              layout="inline"
              form={searchForm}
              onFinish={handleFinish}
              style={{ marginBottom: '20px' }}
            >
              <Form.Item label="模版名称" name="name">
                <Input placeholder="请输入模版名称" />
              </Form.Item>
              <Form.Item label="状态" name="status">
                <Select placeholder="请选择状态" allowClear>
                  <Select.Option value="PENDING">待审核</Select.Option>
                  <Select.Option value="APPROVED">审核通过</Select.Option>
                  <Select.Option value="REJECTED">审核驳回</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  搜索
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={handleReset}>
                  重置
                </Button>
              </Form.Item>
            </Form>
            <Table
              columns={columns}
              dataSource={templates}
              rowKey="id"
              loading={loading}
              pagination={{
                ...pagination,
                showTotal: (total: number) => `共 ${total} 条`,
                showSizeChanger: true,
              }}
              onChange={handleTableChange}
            />
          </TabPane>
        </Tabs>
      </Card>

      <TemplateFormModal
        visible={modalVisible}
        title={editingTemplate ? '编辑模版' : '新增模版'}
        onOk={handleModalOk}
        onCancel={() => setModalVisible(false)}
        editingTemplate={editingTemplate}
        organizations={organizations}
        signatures={signatures}
        form={form}
      />

      <TemplateAuditModal
        visible={auditModalVisible}
        title={
          auditingTemplate &&
          some(userInfo?.permissions, permission =>
            startsWith(permission?.code, 'BUSINESS_AUDIT_TEMPLATE_AUDIT')
          )
            ? '模板审核'
            : '模板详情'
        }
        onOk={handleAuditOk}
        onCancel={() => {
          setAuditModalVisible(false);
          setAuditingTemplate(null);
        }}
        form={auditForm}
        template={auditingTemplate}
        userInfo={userInfo}
        signatures={signatures}
        organizations={organizations}
      />

      <Modal
        title="导入模版"
        visible={importModalVisible}
        onOk={handleImportOk}
        width={600}
        onCancel={() => setImportModalVisible(false)}
        destroyOnClose
        maskClosable={false}
      >
        <Form form={importForm} layout="vertical">
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                name="organizationId"
                label="单位"
                rules={[{ required: true, message: '请选择单位' }]}
              >
                <TreeSelect
                  showSearch
                  style={{ width: '100%' }}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择单位"
                  allowClear
                  treeDefaultExpandAll
                  fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                  treeData={convertToTree(organizations)}
                  treeNodeFilterProp="title"
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="signatureId"
                label="签名"
                rules={[{ required: true, message: '请选择签名' }]}
              >
                <Select placeholder="请选择签名">
                  {signatures.map(signature => (
                    <Select.Option key={signature.id} value={signature.id}>
                      {signature.name}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                name="type"
                label="类型"
                rules={[{ required: true, message: '请选择类型' }]}
              >
                <Select placeholder="请选择类型">
                  <Select.Option value="行业短信">行业短信</Select.Option>
                  <Select.Option value="靶向短信">靶向短信</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="file"
                label="模版文件"
                rules={[{ required: true, message: '请上传模版文件' }]}
                extra={
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <a href="/webapp/模板导入.xlsx" target="_blank">
                      模板导入.xlsx
                    </a>
                  </div>
                }
              >
                <Upload accept=".xlsx,.xls,.csv,.et" maxCount={1} beforeUpload={() => false}>
                  <Button icon={<UploadOutlined />}>上传模版文件</Button>
                </Upload>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                style={{ marginBottom: 0 }}
                shouldUpdate={(prevValues, currentValues) =>
                  prevValues.organizationId !== currentValues.organizationId ||
                  prevValues.type !== currentValues.type
                }
              >
                {() => {
                  const target = find(organizations, {
                    id: importForm.getFieldValue('organizationId'),
                  });
                  if (importForm.getFieldValue('type') === '靶向短信' && target) {
                    return (
                      <Form.Item
                        name="ctFileUrl"
                        label="中国电信授权委托函"
                        rules={[{ required: true, message: '请上传中国电信授权委托函' }]}
                        valuePropName="fileList"
                        getValueFromEvent={e => {
                          if (Array.isArray(e)) {
                            return e;
                          }
                          return e && e.fileList;
                        }}
                        extra={
                          <div style={{ display: 'flex', flexDirection: 'column' }}>
                            {target?.emergency === 1 && (
                              <a href="/webapp/模板-中国电信授权委托函-应急类.docx" target="_blank">
                                模板-中国电信授权委托函-应急类.docx
                              </a>
                            )}
                            {target?.emergency === 0 && (
                              <a
                                href="/webapp/模板-中国电信授权委托函-非应急类.docx"
                                target="_blank"
                              >
                                模板-中国电信授权委托函-非应急类.docx
                              </a>
                            )}
                          </div>
                        }
                      >
                        <Upload
                          name="files"
                          action={uploadUrl}
                          headers={{
                            uniqueToken,
                            userId: userInfo.id,
                          }}
                          showUploadList={{
                            showPreviewIcon: false,
                            showDownloadIcon: true,
                          }}
                          onDownload={(file: any) => {
                            downLoadByUrl(
                              get(file, 'response.data[0].path'),
                              get(file, 'response.data[0].realName')
                            );
                          }}
                        >
                          <Button icon={<UploadOutlined />}>上传中国电信授权委托函</Button>
                        </Upload>
                      </Form.Item>
                    );
                  }
                }}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                style={{ marginBottom: 0 }}
                shouldUpdate={(prevValues, currentValues) =>
                  prevValues.organizationId !== currentValues.organizationId ||
                  prevValues.type !== currentValues.type
                }
              >
                {() => {
                  const target = find(organizations, {
                    id: importForm.getFieldValue('organizationId'),
                  });
                  if (importForm.getFieldValue('type') === '靶向短信' && target) {
                    return (
                      <Form.Item
                        dependencies={['organizationId', 'type']}
                        rules={[{ required: true, message: '请上传中国联通授权委托函' }]}
                        name="cuFileUrl"
                        label="中国联通授权委托函"
                        valuePropName="fileList"
                        getValueFromEvent={e => {
                          if (Array.isArray(e)) {
                            return e;
                          }
                          return e && e.fileList;
                        }}
                        extra={
                          <div style={{ display: 'flex', flexDirection: 'column' }}>
                            {target?.emergency === 1 && (
                              <a href="/webapp/模版-中国联通授权委托函-应急类.docx" target="_blank">
                                模版-中国联通授权委托函-应急类.docx
                              </a>
                            )}
                            {target?.emergency === 0 && (
                              <a
                                href="/webapp/模版-中国联通授权委托函-非应急类.docx"
                                target="_blank"
                              >
                                模版-中国联通授权委托函-非应急类.docx
                              </a>
                            )}
                          </div>
                        }
                      >
                        <Upload
                          name="files"
                          action={uploadUrl}
                          headers={{
                            uniqueToken,
                            userId: userInfo.id,
                          }}
                          showUploadList={{
                            showPreviewIcon: false,
                            showDownloadIcon: true,
                          }}
                          onDownload={(file: any) => {
                            downLoadByUrl(
                              get(file, 'response.data[0].path'),
                              get(file, 'response.data[0].realName')
                            );
                          }}
                        >
                          <Button icon={<UploadOutlined />}>上传中国联通授权委托函</Button>
                        </Upload>
                      </Form.Item>
                    );
                  }
                }}
              </Form.Item>
            </Col>
          </Row>
          <p>
            注意：
            <br />
            {`1.模板参数若定义为{xxx}形式，xxx为参数名称，参数名称只能包含数字或大小写字母，变量最多5个`}
            <br />
            2.短信长度（签名+正文）不超过70字时，按照1条短信计费；超过70字即为长短信时，按67字/条分隔成多条计费。
            <br />
            例如，短信长度为80字，则按照67字/13字/分隔成2条计费，但短信接收方收到的是完整短信而非2条分开的短信。
            <br />
            3.短信模板内容不能含有【】符号
            <br />
            <strong>
              示例：
              <br />
              {`尊敬的用户,您在本平台的验证码为{code},如非本人请勿操作,{minutes}分钟内有效.`}
            </strong>
          </p>
        </Form>
      </Modal>
    </div>
  );
};

export default Templates;
